<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>我的用户列表</title>

</head>
<body>
<jsp:include page="/incloud/header.jsp" />

<div class="d-flex align-items-stretch">
    <!-- Sidebar Navigation-->
    <jsp:include page="/incloud/sidebar.jsp" />
    <!-- Sidebar Navigation end-->
    <div class="page-content">
        <div class="page-header">
            <div class="container-fluid">
                <h2 class="h5 no-margin-bottom">我的关注列表</h2>
            </div>
        </div>
        <section class="no-padding-bottom">

            <div class="list-group myList">
                <ul id="focusList">

                </ul>
                <nav class="text-center" aria-label="Page navigation">
                    <ul class="pagination">
                    </ul>
                </nav>
            </div>
        </section>

        <jsp:include page="/incloud/footer.jsp" />
    </div>
</div>

<script>
    $(function () {


        $(document).on("click", ".btn-danger", function () {
            var userId = $(this).closest("li").find(".userDetail").data("id");
            console.log("Unfollow user ID:", userId);
            // 发起取消关注的请求
            $.ajax({
                url: "/user/unfocus",
                type: "post",
                data: {
                    userId: userId
                },
                dataType: "json",
                success: function (response) {
                    if (response.code == 200) {
                        console.log("取消关注成功");
                        // 可以在这里更新页面内容，比如移除该用户条目
                        getFocusList(1);
                    } else {
                        console.log("取消关注失败:", response.message);
                    }
                },
                error: function (error) {
                    console.log("请求失败:", error);
                }
            });
        });

        function getFocusList(page) {
            $.ajax({
                url: "/user/getFocusList",
                type: "get",
                data: {
                    page: page
                },
                dataType: "json",
                success: function (response) {
                    if (response.code == 200) {
                        var data = response.data;
                        $("#focusList").empty(); // 清空当前列表
                        for (var i = 0; i < data.records.length; i++) {
                            var html = '<li class="list-group-item">' +
                                '<a href="/html/user_detail.jsp?userId='+data.records[i].id+'" data-id="' + data.records[i].id + '" class="userDetail">' + data.records[i].username + '</a>' +
                                '<div style="float: right" class="text-right">' +
                                '<input type="submit" class="btn btn-danger" value="取消关注">' +
                                '</div>' +
                                '</li>';
                            $("#focusList").append(html);
                        }
                        // 更新分页按钮
                        updatePagination(page, data.totalPage);
                    }
                }
            });
        }

        function updatePagination(currentPage, totalPages) {
            console.log(currentPage, totalPages);

            var paginationHtml = "";
            paginationHtml += "<li class='" + (currentPage === 1 ? "disabled" : "") + "'>";
            paginationHtml += "<a href='#' aria-label='Previous' data-page='" + (currentPage - 1) + "'>";
            paginationHtml += "<span aria-hidden='true'>&laquo;</span>";
            paginationHtml += "</a>";
            paginationHtml += "</li>";

            for (var i = 1; i <= totalPages; i++) {
                paginationHtml += "<li class='" + (i === currentPage ? "active" : "") + "'>";
                paginationHtml += "<a href='#' data-page='" + i + "'>" + i + "</a>";
                paginationHtml += "</li>";
            }

            paginationHtml += "<li class='" + (currentPage === totalPages ? "disabled" : "") + "'>";
            paginationHtml += "<a href='#' aria-label='Next' data-page='" + (currentPage + 1) + "'>";
            paginationHtml += "<span aria-hidden='true'>&raquo;</span>";
            paginationHtml += "</a>";
            paginationHtml += "</li>";


            $(".pagination").html(paginationHtml);

            // 使用事件委托绑定分页按钮的点击事件
            $(".pagination").off("click", "a").on("click", "a", function (event) {
                event.preventDefault();
                var page = $(this).data("page");
                var currentPage = parseInt($(".pagination .active a").data("page"), 10); // 获取当前页码

                // 如果点击的是当前页按钮，直接返回
                if (page === currentPage) {
                    return;
                }

                // 确保 page 是有效的数字
                if (page && !isNaN(page)) {
                    getFocusList(page);
                }
            });
        }

        $(document).on("click", "#prevPage", function () {
            var currentPage = parseInt($(".pagination").data("current-page"));
            getFocusList(currentPage - 1);
        });

        $(document).on("click", "#nextPage", function () {
            var currentPage = parseInt($(".pagination").data("current-page"));
            getFocusList(currentPage + 1);
        });

        // 初始化加载第一页
        getFocusList(1);


    });
</script>


</body>
</html>